<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import {GetUserList,DeleteUser} from '../../api/users'
import userEdit from "./userEdit.vue"
const tableData = ref([])
const dialogVisible = ref(false)
const UserListData=async()=>{
    const res=await GetUserList()
    // console.log(res.data);
    tableData.value=res.data.data
}
UserListData()
//编辑
const userlist=ref([])
const handleClick=(row)=>{
    userlist.value=row
    dialogVisible.value=true
}
const handleCloses=()=>{
    dialogVisible.value=false
}
//编辑
const EditUserData=()=>{
    UserListData()
    dialogVisible.value=false
}
//删除
const DeleteUserData=async(id)=>{
   ElMessageBox.confirm(
    '是否确定注销该用户',
    '注销用户',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
        const res=await DeleteUser(id)
        console.log(res.data);
        if(res.data.status==200){
        UserListData()
        ElMessage({
        type: 'success',
        message:res.data.massage,
         })
        }else{
           ElMessage.error('注销失败')
        }
    })
    .catch(() => {})
}

</script>
<template>
    <div class="userlist">
       <el-page-header icon="" content="用户列表" title="用户管理"></el-page-header>
         <el-card class="cardlist" style="max-width: 100%">
                 <el-table :data="tableData" style="width: 100%" height="750">
                      <el-table-column prop="name" label="用户名" width="400" />
                      <el-table-column prop="image" label="头像" width="400">
                        <template #default="{row}">
                         <img :src="row.image" alt="">
                        </template>
                      </el-table-column>
                      <el-table-column prop="acter" label="角色" width="400" />
                      <el-table-column prop="city" label="操作" width="300">
                      <template #default="{row}">
                      <el-button  size="large" @click="handleClick(row)">编辑</el-button>
                      <el-button  type="danger"  size="large" @click="DeleteUserData(row.id)">删除</el-button>
                      </template>
                      </el-table-column>
                 </el-table>
         </el-card>
         <div>
             <el-dialog
                v-model="dialogVisible"
                title="编辑用户"
                width="500"
               :destroy-on-close="true"
             >
              <userEdit :userlist="userlist" @catchs="handleCloses" @edituser="EditUserData"/>
             </el-dialog>
         </div>
    </div>
</template>
<style lang="less" scoped>
.cardlist{
    margin-top: 30px;
    height: 800px;
}
img{
    border-radius: 50px;
    height: 60px;
    width: 60px;
    object-fit: cover;
}
</style>